<template>
  <div class="app-container">
    <el-row :gutter="50" style="margin: 10px 120px">
      <el-col v-for="(item,index) in statistics" :span="8" :key="index">
        <el-card shadow="hover" class="statistic-card" @click.native="push(item.path)">
          <el-row class="card-row">
            <el-col class="img-col" :span="12">
              <el-image :src="imgUrl+item.img" class="img"/>
            </el-col>
            <el-col class="text" :span="12">
              <el-row class="title">{{ item.title }}</el-row>
              <el-row class="count">{{ item.count }} <span class="unit">{{ item.unit }}</span></el-row>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
    </el-row>
    <el-row style="margin: 20px 10px">
      <el-col :span="12">
        <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
        <div id="course" style="height:350px;width: 100%"></div>
      </el-col>
      <el-col :span="12">
        <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
        <div id="subject" style="height:350px;width: 100%"></div>
      </el-col>
    </el-row>

  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { courseApi, memberApi, orderApi, subjectApi, teacherApi, videoApi } from '@/api'
// 引入echarts
import * as echarts from 'echarts'

export default {
  name: 'Dashboard',
  computed: {
    ...mapGetters([
      'name',
      'roles',
      'userId'
    ])
  },
  created() {
    this.fetchData()
  },
  mounted() {
    this.showChart()
  },
  data() {
    return {
      statistics: [
        {
          img: 'teacher.png',
          title: '讲师数量',
          count: 0,
          unit: '位',
          path: '/teacher'
        },
        {
          img: 'subject.png',
          title: '科目数量',
          count: 0,
          unit: '科',
          path: '/subject'
        },
        {
          img: 'board.png',
          title: '课程数量',
          count: 0,
          unit: '门',
          path: '/course'
        },
        {
          img: 'video.png',
          title: '视频数量',
          count: 0,
          unit: '个',
          path: '/course'
        },
        {
          img: 'member.png',
          title: '会员数量',
          count: 0,
          unit: '人',
          path: '/member'
        },
        {
          img: 'order.png',
          title: '销售额',
          count: 0,
          unit: '元',
          path: '/order'
        }
      ],
      imgUrl: process.env.VUE_APP_OSS_PATH + '/dashboard/' // 图片url
    }
  },
  methods: {
    // 初始化统计数据
    fetchData() {
      teacherApi.count().then(response => {
        this.statistics[0].count = response.data.count
      })
      subjectApi.count().then(response => {
        this.statistics[1].count = response.data.count
      })
      courseApi.count().then(response => {
        this.statistics[2].count = response.data.count
      })
      videoApi.count().then(response => {
        this.statistics[3].count = response.data.count
      })
      memberApi.count().then(response => {
        this.statistics[4].count = response.data.count
      })
      orderApi.count().then(response => {
        this.statistics[5].count = response.data.count
      })
    },
    // 点击卡片跳转
    push(path) {
      console.log(path)
      this.$router.push({ path: path })
    },
    // 展示图表
    showChart() {
      subjectApi.chart().then(response => {
        this.showSubjectChart(response.data.subjectChart)
      })
      courseApi.chart().then(response => {
        this.showCourseChart(response.data.courseChart)
      })

    },
    // 展示饼状图
    showSubjectChart(chartValue) {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('subject'))
      // 指定图表的配置项和数据
      var option = {
        title: {
          text: '课程类别比例',
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          top: '10%',
          left: '10%',
          textStyle: {
            fontSize: 14
          }
        },
        series: [
          {
            name: '课程数',
            type: 'pie',
            radius: '50%',
            data: chartValue,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            },
            label: {
              fontSize: 14
            }
          }
        ]
      }
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option)
    },
    // 展示柱状图
    showCourseChart(chartValue) {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('course'))
      // 指定图表的配置项和数据
      var option = {
        title: {
          text: '课程点击数 TOP 5',
          left: 'center'
        },
        xAxis: {
          type: 'value',
          axisLabel: {
            show: true,
            textStyle: {
              fontSize: 14
            }
          }
        },
        yAxis: {
          type: 'category',
          data: chartValue.category,
          axisLabel: {
            show: true,
            textStyle: {
              fontSize: 14
            }
          }
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          left: '5%',
          containLabel: true
        },
        series: [{
          data: chartValue.value,
          type: 'bar',
          showBackground: true,
          backgroundStyle: {
            color: 'rgba(180, 180, 180, 0.2)'
          },
          itemStyle: {
            normal: {
              color(params) {
                const colorList = [
                  '#5470c6',
                  '#91cc75',
                  '#fac858',
                  '#ee6666',
                  '#73c0de']
                return colorList[params.dataIndex]
              }
            }
          }
        }]
      }
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option)
    }
  }
}
</script>

<style lang="scss">
$size: 60px;
.statistic-card {
  background: rgba(236, 248, 243, 0.42);
  border: 3px solid #DCE7DC;
  margin-bottom: 30px;
}

.card-row {
  .img {
    height: $size;
    width: $size;
  }

  .title {
    color: #909399;
    height: 30px;
    line-height: 30px;
    font-size: 18px;
    text-align: right;
  }

  .count {
    height: 30px;
    line-height: 30px;
    font-size: 24px;
    text-align: right;
    color: #118AB2;
    font-weight: bold;
    font-family: "Microsoft YaHei";
  }

  .unit {
    color: #303133;
    font-weight: normal;
  }
}

</style>
